<template>
	<view>
		<!-- 普通弹窗 background-color="#ffffff" -->
		<uni-popup :is-mask-click="false" ref="popup" type="center">
			<view>
				<view class="w-pop" style="background: #ffffff;">
					<view class="base-title">通用二级佣金比例</view>
					<view v-if="showTip" class="tip2">您未设置二级通用佣金比例，将会影响二级经纪人佣金收益，请先设置</view>
					<view class="item-box">
						<view class="label-box">二级佣金比例</view>
						<view class="flex item-center justify-between commison-rate">
							<input type="digit" placeholder="请输入" class="rate-inp" v-model="formData.configValue">
							<view class="rate-units">%</view>
						</view>
					</view>
					<view class="tip" style="margin-bottom: 8px;">默认二级经纪人佣金比例，未设置分组佣金时按 通用比例计算二级经纪人佣金</view>
					<view class="tip">二级佣金=您的佣金金额*二级佣金比例</view>
					<view class="flex item-center btn-box">
						<view class="cancal-btn" @click="showPop(false)">取消</view>
						<view class="submit-btn" @click="submit">保存</view>
					</view>
				</view>
			</view>

		</uni-popup>
	</view>
</template>

<script setup name="setCommission">
	import {
		ref,
		reactive,
		defineEmits,
		computed
	} from 'vue';
	import { saveConfig } from '@/pagesH/api/subscribe.js'
	const emit = defineEmits(['refresh'])
	const formData = ref({configValue: '', configKey: ''})
	const popup = ref()
	const props = defineProps({
		showTip: {
			type: Boolean,
			default: false
		}
	})
	const showPop = async (value, configKey, val) => {
		if (value) {
			popup.value && popup.value.open('center')
			formData.value.configKey = configKey
			formData.value.configValue = val
		} else {
			popup.value && popup.value.close()
		}
	}
	const submit = async () => {
		if (!formData.value.configValue) {
			uni.showToast({
				icon: 'none',
				title: '请填写二级佣金比例'
			})
			return
		}
		saveConfig(formData.value).then(result => {
			uni.showToast({
				icon: 'none',
				title: '修改成功'
			})
			showPop(false)
			emit('refresh')
		}).catch(err => {
			uni.showToast({
				icon: 'none',
				title: err.message
			})
		})
	}
	defineExpose({
		showPop
	})
</script>

<style scoped lang="scss">
	.w-pop {
		background: #ffffff;
		border-radius: 8px;
		padding: 20px 0px 0 0px;
		width: 320px;
	}
	
	.tip2{
		padding: 0 20px;
		font-size: 12px;
		color: #FCB513;
		background: #FFE9B7;
		margin-bottom: 16px;
	}

	.base-title {
		font-size: 20px;
		font-weight: 600;
		line-height: 28px;
		margin-bottom: 10px;
		text-align: center;
	}

	.item-box {
		margin: 16px 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.label-box {
		font-size: 14px;
		font-weight: 600;
		line-height: 20px;
		color: rgba(51, 51, 51, 1);
		margin: 6px 0;
	}

	.tip{
		font-size: 12px;
		color: rgba(51,51,51,0.6);
		margin: 0 20px;
	}
	
	.commison-rate{
		width: 119px;
		height: 32px;
		border-radius: 8px;
		border: 1px solid rgba(51, 51, 51, 0.3);
		margin-left: 10px;
		.rate-units{
			width: 40px;
			height: 32px;
			padding: 5px 14px;
			border-radius: 0px 8px 8px 0px;
			border-left: 1px solid rgba(51, 51, 51, 0.3);
			background-color: rgba(226, 226, 226, 1);
		}
		.rate-inp{
			margin-left: 4px;
			height: 100%;
		}
	}

	.btn-box {
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		margin-top: 20px;
		line-height: 40px;
	}

	.cancal-btn {
		width: 50%;
		font-family: PingFang SC;
		font-size: 16px;
		font-weight: 400;
		text-align: center;
		color: rgba(51, 51, 51, 0.6);
		border-right: 1px solid rgba(0, 0, 0, 0.1);
	}

	.submit-btn {
		width: 50%;
		font-family: PingFang SC;
		font-size: 16px;
		font-weight: 400;
		text-align: center;
		color: rgba(250, 69, 67, 1);
	}
</style>
